<template>

  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通告管理</el-breadcrumb-item>
      <el-breadcrumb-item>通告编辑</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片-->
    <el-card class="box-card">
    <div >
      <el-form ref="addFormRef" :model="editForm" label-width="80px">
        <el-form-item label="通告标题" >
          <el-input v-model="editForm.title" placeholder="请输入新闻标题"  class="inp" ></el-input>
        </el-form-item>
        <el-form-item label="通告类型">
          <el-select v-model="editForm.type" placeholder="请选择类型" class="inp">
            <el-option
                    v-for="item in typeList"
                    :key="item.typeId"
                    :label="item.typeName"
                    :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>

    <!--富文本编辑器-->
      <div id="editor" class="text" ></div>

      <el-button @click="savaBtn(editor)" type="primary" size="medium"  class="saveBtn">保存</el-button>
    </el-card>
  </div>
</template>

<script>
  import {noticeHttp} from 'network/notice'

  import E from 'wangeditor'
  import 'wangeditor/release/wangEditor.min.css'

  export default {
    data() {
      return {
        typeList: [
          {
            typeId: 1,
            typeName: '公开'
          }, {
            typeId: 0,
            typeName: '非公开'
          }
        ],
        editForm:{
          noticeId: '',
          title: '',
          content: '',
          type: ''
        },
        editor: '',
      }
    },
    methods: {
      savaBtn(editor){
        this.editForm.content = editor.txt.html()
        noticeHttp.edit(this.editForm).then(res =>{
          if (res.code === 20000){
            this.$router.replace('/notice')
          } else{
            this.$message.error(res.message)
          }
        })
      }

        //todo 保存操作
      },

    created(){
      //初始化通告详情
      noticeHttp.get(this.$route.params.noticeId).then(res =>{
        this.editForm = res.data
        this.editor.txt.html(res.data.content)
      })
    },
    mounted() {
      this.editor = new E('#editor')
      this.editor.customConfig.uploadImgShowBase64 = true
      this.editor.customConfig.showLinkImg = false
      this.editor.create();
      this.editor.txt.html();
    },
  }
</script>

<style scoped>
  .inp{
    width: 200px;
    float: left
  }
  .text{
    margin-top: 100px;
  }
  .saveBtn{
    margin-top: 20px;

  }
</style>
